
 <!--  日志管理 -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>日志管理</el-breadcrumb-item>
    </el-breadcrumb> 
    <div class="log-list">  
    <el-container>  
      <el-header>  
        <el-input  
          placeholder="请输入关键词搜索"  
          v-model="searchKeyword"  
          clearable  
          @clear="handleClear"  
          @input="handleSearch"  
        >  
          <el-button slot="append" icon="el-icon-search"></el-button>  
        </el-input>  
      </el-header>  
      <el-main>  
        <el-table  
          :data="filteredLogs"  
          style="width: 100%"  
          @sort-change="handleSortChange"  
        >  
          <el-table-column  
            prop="time"  
            label="时间"  
            sortable  
            width="180"  
          ></el-table-column>  
          <el-table-column  
            prop="level"  
            label="日志级别"  
            width="100"  
          ></el-table-column>  
          <el-table-column  
            prop="message"  
            label="日志信息"  
          ></el-table-column>  
          <el-table-column  
            prop="source"  
            label="来源"  
            width="200"  
          ></el-table-column>  
          <el-table-column  
            label="操作"  
            width="120"  
          >  
            <template slot-scope="scope">  
              <el-button type="text" @click="handleDetail(scope.$index, scope.row)">详情</el-button>  
            </template>  
          </el-table-column>  
        </el-table>  
  
        <el-pagination  
          @size-change="handleSizeChange"  
          @current-change="handleCurrentChange"  
          :current-page="currentPage"  
          :page-sizes="[10, 20, 50, 100]"  
          :page-size="pageSize"  
          layout="total, sizes, prev, pager, next, jumper"  
          :total="totalLogs"  
        ></el-pagination>  
      </el-main>  
    </el-container>  
  </div>  
  </div>
</template>

<script>
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      searchKeyword: '',  
      logs: [], // 假设这是从后端获取的原始日志数据  
      filteredLogs: [], // 根据搜索和排序过滤后的日志数据  
      currentPage: 1,  
      pageSize: 10,  
      totalLogs: 20,  
      sort: {  
        prop: 'timestamp',  
        order: 'descending',  
      },  
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  computed: {  
    // 根据搜索关键词和排序对日志进行过滤  
    filteredLogsComputed() {  
      const { searchKeyword, sort } = this;  
      let filtered = [...this.logs];  
      if (searchKeyword) {  
        filtered = filtered.filter(log =>  
          log.message.includes(searchKeyword) ||  
          log.source.includes(searchKeyword)  
        );  
      }  
      if (sort.prop && sort.order) {  
        filtered.sort((a, b) => {  
          if (a[sort.prop] < b[sort.prop]) return sort.order === 'ascending' ? -1 : 1;  
          if (a[sort.prop] > b[sort.prop]) return sort.order === 'ascending' ? 1 : -1;  
          return 0;  
        });  
      }  
      return filtered.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);  
    },  
  },  
  watch: {  
    // 监听搜索关键词变化，实时过滤日志  
    searchKeyword(newVal) {  
      this.filteredLogs = this.filteredLogsComputed;  
    },  
    // 监听排序变化，实时过滤日志  
    sort: {  
      handler(newVal) {  
        this.filteredLogs = this.filteredLogsComputed;  
      },  
      deep: true,  
    }, 

 // 监听当前页码变化  
    currentPage(newVal) {  
      this.filteredLogs = this.filteredLogsComputed;  
    },  
    // 监听每页显示数量变化  
    pageSize(newVal) {  
      this.currentPage = 1; // 当每页显示数量变化时，通常回到第一页  
      this.filteredLogs = this.filteredLogsComputed;  
    },  
    // 监听原始日志数据变化 
    logs(newVal) {  
      // this.totalLogs = newVal.length;  
      this.filteredLogs = this.filteredLogsComputed;  
    }  
  },  
  // 在组件创建时获取日志数据  
  created() {  
      this.fetchLogs();  
    },
  methods: {  
    // 处理搜索输入  
    handleSearch() {  
      this.currentPage = 1; // 当搜索时，通常回到第一页  
      this.filteredLogs = this.filteredLogsComputed;  
    },  
    // 清除搜索关键词  
    handleClear() {  
      this.searchKeyword = '';  
      this.handleSearch();  
    },  
    // 处理排序变化  
    handleSortChange({ prop, order }) {  
      this.sort = { prop, order };  
    },  
    // 处理每页显示数量变化  
    handleSizeChange(val) {  
      this.pageSize = val;  
    },  
    // 处理当前页码变化  
    handleCurrentChange(val) {  
      this.currentPage = val;  
    },  
    // 处理日志详情查看  
    handleDetail(index, row) {  
      this.$message.info(row)
    },  
    //获取日志数据  
    fetchLogs() {  
      //测试环境
      this.logs= [  
      {  
        time: '2024-04-01 10:00:00',  
        level: 'INFO',  
        message: '系统已启动。',  
        source: '服务器启动脚本'  
      },  
      {  
        time: '2024-04-01 10:05:15',  
        level: 'WARN',  
        message: '用户登录失败，密码错误3次。',  
        source: '用户认证模块'  
      },  
      {  
        time: '2024-04-01 10:15:30',  
        level: 'DEBUG',  
        message: '接收到API请求，处理中...',  
        source: 'API服务层'  
      },  
      {  
        time: '2024-04-01 10:20:45',  
        level: 'INFO',  
        message: '数据更新成功。',  
        source: '数据库操作模块'  
      },  
      {  
        time: '2024-04-01 10:30:00',  
        level: 'ERROR',  
        message: '文件上传失败，磁盘空间不足。',  
        source: '文件处理服务'  
      },  
      {  
        time: '2024-04-01 10:40:15',  
        level: 'WARN',  
        message: '订单状态异常，请检查。',  
        source: '订单处理服务'  
      },  
      {  
        time: '2024-04-01 10:50:30',  
        level: 'INFO',  
        message: '邮件发送成功。',  
        source: '邮件发送服务'  
      },  
      {  
        time: '2024-04-01 11:00:45',  
        level: 'DEBUG',  
        message: '缓存数据更新。',  
        source: '缓存管理模块'  
      },  
      {  
        time: '2024-04-01 11:10:00',  
        level: 'INFO',  
        message: '系统定时任务执行完毕。',  
        source: '任务调度模块'  
      },  
      {  
        time: '2024-04-01 11:15:15',  
        level: 'WARN',  
        message: '第三方接口调用超时，请重试。',  
        source: '外部接口调用服务'  
      }  
      ]  
      this.totalLogs = 51;
      // //正式环境 
      // axios.get('/api/logs')  
      //   .then(response => {  
      //     this.logs = response.data;  
      //     this.totalLogs = response.totalLogs;
      //   })  
      //   .catch(error => {  
      //     console.error('获取日志数据失败:', error);  
      //   });  
    },  
    
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.log-list{
  margin-top: 30px;
}
</style>

 